<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to DNAxCAT Rocky's website!</title>
    <!--Bootstrap-->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <!--CSS file specially for current page-->
    <link rel="stylesheet" href="style/search.css">
    <!--Material Symbols-->
    <link rel="stylesheet" href="node_modules/material-symbols/index.css">
    <!--Fontawesome-->
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <!--Universal skin CSS file-->
    <link rel="stylesheet" href="style/main.css">
    <!--Website logo to be shown before title-->
    <link rel="shortcut icon" href="icon/hoshi.svg" type="image/x-icon">
</head>

<body>
    <div id="load">
        <div class="load_hoshi">
            <img src="icon/hoshi_w.svg" alt="">
        </div>
    </div>
    <!--A navbar is still necessary, handled by JQuery things-->
    <div id="rocky_nav" role="navigation">
    </div>
    <div class="gap"></div>
    <div class="main">
        <div class="container m-auto pt-4">
            <h1>Search result of "<span class="search_word">__</span>"</h1>
            <p>Found <span class="result_count">_</span> result(s)</p>
            <form class="d-flex mb-4" role="search" data-bs-theme="light" action="search.html">
                <input class="form-control me-2 rocky_search" name="search" type="search" placeholder="Search"
                    aria-label="Search">
                <button class="btn btn-outline-light" type="submit">Search</button>
            </form>
            <div>
                <div class="row">
                    <div class="col-12 col-sm-6 m-auto">
                        <div class="d-flex align-items-center">
                            <div>
                                <img src="icon/emblem-generic.svg" alt="" class="h-auto"
                                    style="width: 10vw; max-width: 96px; min-width: 64px">
                            </div>
                            <div class="ms-2">
                                <h3 class="m-0">Coming soon!</h3>
                                <p class="m-0">This feature is working in progress and will be implemented in a further
                                    milestone!
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Footer, handled by pure Javascript.-->
    <footer id="footer">
    </footer>
</body>
<script>
    const mark = "search";
</script>
<script src="node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="module" src="script/search.js"></script>

</html>